
<template>
    <div class="btn-group">
        <div
            v-for="item in btnGroup"
            :key="item.id"
            :class="['btn-item', active === item.id ? 'active' : 'inactive']"
            @click="handleActive(item.id)"
        >
            {{ item.label }}
        </div>

        <div v-if="showDate" :class="['btn-item', active === 'Month' ? 'active' : 'inactive']" @click="handleActive('Month')">
            <el-date-picker
                v-model="month"
                v-if="showDate"
                type="month"
                size="mini"
                placeholder="选择月"
                :style="{width: '110px', height: '27px'}"
            >
            </el-date-picker>
        </div>
    </div>
</template>

<script>
export default {
    name: 'btnGroup',
    props: {
        btnGroup: {
            type: Array,
            default: () => []
        },
        showDate: {
            type: Boolean,
            default: false
        },
        activeNow: {
            type: String,
            default: 'year'
        }
    },
    data() {
        return {
            active: '',
            month: new Date()
        }
    },

    created() {},
    mounted() {
        this.$nextTick(() => {
            this.active = this.activeNow
        })
    },
    methods: {
        handleActive(type) {
            this.active = type
        }
    }
}
</script>

<style scoped  lang="scss">
.btn-group {
    display: flex;
    gap: 5px;
    font-size: 14px;
    .btn-item {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 3px 10px;
        cursor: pointer;
        &:hover {
            background-color: #3d97e4;
            color: #fff;
        }
    }
    .active {
        background-color: #008aff;
    }
    .inactive {
        background-color: #184588;
        color: #cdced8;
    }
}
</style>
